<!doctype html>  
<!--[if IE 6 ]><html lang="en-us" class="ie6"> <![endif]-->
<!--[if IE 7 ]><html lang="en-us" class="ie7"> <![endif]-->
<!--[if IE 8 ]><html lang="en-us" class="ie8"> <![endif]-->
<!--[if (gt IE 7)|!(IE)]><!-->
<html lang="en-us"><!--<![endif]-->
<head>
	<meta charset="utf-8">
	
	<title>Flati - Responsive Bootstrap3 Template</title>
	<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
	
	
	<link rel="shortcut icon" href="assets/images/favicon.ico">
	<link rel="stylesheet" href="assets/css/documenter_style.css" media="all">
	<link rel="stylesheet" href="assets/js/google-code-prettify/prettify.css" media="screen">
	<script src="assets/js/google-code-prettify/prettify.js"></script>
	<script src="assets/js/jquery.js"></script>
	<script src="assets/js/jquery.scrollTo.js"></script>
	<script src="assets/js/jquery.easing.js"></script>
	
	<script>document.createElement('section');var duration='500',easing='swing';</script>
	<script src="assets/js/script.js"></script>
	
	<style>
		img { border:1px solid #999;}
		.logo  {outline: none; border:0px;float:right; margin:0 -40px 0 ;}
		#documenter_sidebar #documenter_logo{ display:block; margin:20px 0px 0;}
		::-moz-selection{background:#333636;color:#00DFFC;}
		::selection{background:#333636;color:#00DFFC;}
		a{color:#F96E5B}
		a:hover { text-decoration:none; color: #444; }
		#documenter_sidebar, #documenter_sidebar ul a{background-color:#343838;color:#FFFFFF;}
		#documenter_sidebar ul{border-top:1px solid #212424;}
		#documenter_sidebar ul a{border-top:1px solid #494F4F;border-bottom:1px solid #212424;color:#FFFFFF;}
		#documenter_sidebar ul a:hover{background:#333636;color:#F96E5B; border-top:1px solid #333636;}
		#documenter_sidebar ul a.current{background:#333636;color:#F96E5B;border-top:1px solid #333636;}
		#documenter_copyright{display:block !important;visibility:visible !important;}
	</style>
</head>

<body class="documenter-project-flati">
	<div id="documenter_sidebar">
		<a href="#documenter_cover" id="documenter_logo"><img src="assets/images/logo.png" class="logo" alt="" /></a>
		<ul id="documenter_nav">
			<li><a class="current" href="#documenter_cover">Start</a></li>
			<li><a href="#theme_updates">Theme Updates</a></li>
			<li><a href="#general">General</a></li>
			<li><a href="#Index_Pages">Index Pages</a></li>
			<li><a href="#pages">Pages</a></li>
			<li><a href="#work">Portfolio & Carousels</a></li>
			<li><a href="#contact">Contact & Map</a></li>
			<li><a href="#css3">CSS3 Animations</a></li>
			<li><a href="#credit">Sources & Credits</a></li>
		</ul>
		<div id="documenter_copyright">Copyright Josweb 2014
		</div>
	</div>
	<div id="documenter_content">
	<section id="documenter_cover">
	<h1>Flati</h1>
	<h2>Responsive Bootstrap Html5 Template</h2>

<ul>
	<li>Created: 06/05/2014</li>
	<li>By Josweb: <a href="http://www.themeforest.net/user/josweb">www.themeforest.net/user/josweb</a></li>
	<li>My Site: <a href="http://www.spiralpixel.com">www.spiralpixel.com</a></li>
	<li>Facebook: <a href="http://www.facebook.com/joswebfan">www.facebook.com/joswebfan</a></li>
	<li>Twitter: <a href="http://www.twitter.com/jo_phillips">www.twitter.com/jo_phillips</a></li>
</ul>
	<br/>
	<p>Many thanks for purchasing Flati. </p>
	<p>If you have any questions that are beyond the scope of this help file, please feel free to contact me through 
	my profile on <a href="http://www.themeforest.net/user/josweb">ThemeForest</a> and I will try my best to help!</p>
	
	<p>Please note: Due to illegal downloads, emails will not be answered if any template related questions are sent to spiralpixel.com. 
	Please use my ThemeForest contact form, thank you.<br/> 
	Don't forget to give it a star rating over at Theme Forest if you have enjoyed customizing the template and lastly.. have fun! 
	</p>
	<p>
	Jo Phillips
	</p>
	</section>
	
	<section id="theme_updates">
	<div class="page-header"><h3>Template Updates</h3></div>
		<h5>Version 1.1</h5>
<ul>
	<li>Updated Revolution Slider to  V.4.6.0 - 16th August 2014
</li>
</ul>
<h5>Version 1.0</h5>
<ul>
	<li>New Bootstrap3 version released - 6th May 2014
</li>
</ul>

<h5>Bootstrap 2.3.2</h5>
<ul><li>
Originally released - 13th May 2013</li>
</ul>

	</section>
	
	<section id="general">
	<div class="page-header"><h3>General</h3></div>
	
	<p><b>Framework:</b> Flati uses Twitter Bootstrap3, you can read more about it here: <a href="http://getbootstrap.com/">http://getbootstrap.com/</a></p>
	<p><b>Columns:</b> Examples of column widths can be seen on: full.html and scaffolding.html</p>
	<p><b>Tabs & Accordion:</b> Examples can be seen on: script_examples.html</p>
	<p><b>Fonts:</b> The font used is called Lato.<br>
	You can add your own fonts quite easily by visiting: <a href="http://www.google.com/webfonts">http://www.google.com/webfonts</a>.
	<br/>
	Select your chosen font and add the code to the head section of the index.html file, and then make the font changes to your css.</p>
	
	<p><b>Icons:</b> Icons used are by FontAwesome giving you scalable vector icons that can instantly be customized - size, color, drop shadow, and anything that can be
	done with the power of CSS. <br>
	<a href="http://fortawesome.github.io/Font-Awesome/">http://fortawesome.github.io/Font-Awesome/</a><br>
	Icon examples can also be seen on: icons.html</p>
	
	<p>
	Place Font Awesome icons just about anywhere with the &lt;i&gt; tag.<br>
<pre class="pre-show prettyprint linenums">
&lt;i class="fa fa-camera-retro"&gt;&lt;/i&gt; fa-camera-retro
</pre>  
	
	<p><b>Template Colours:</b> There are ten colours to choose from, the default colour is blue. <br>
	If you would like to add one of the colours shown in the online demo or indeed add your own, open the folder extras > colour css files and choose your 
	colour folder, copy the css and then paste it into the colour.css file in your main template ( css > colour.css). If you would like to alter the colours you can then easily change them from here.
</p>
	<p><b>Menu:</b> Menu styling can be changed in > theme.css > 02: MENU<br>
	The mobile menu's style can be edited in theme.css > 08: MEDIA QUERIES > /* mobile menu */
</p>


	<p><b>Retina Ready:</b> Flati is Retina Ready and includes retina.js. <br>
	How it works<br>
	retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap 
	in that image. The script assumes you use Apple's prescribed high-resolution modifier (@2x) to denote high-resolution image variants on your server. 
	For example, if you have an image on your page that looks like this: <br>
<pre class="pre-show prettyprint linenums">
&lt;img src="/images/my_image.png" /&gt;
The script will check your server to see if an alternative image exists at this path:
"/images/my_image@2x.png"
</pre> 

	<p>
	Tips For Creating Retina Display Graphics<br>
	<a href="http://photoshopquicktips.com/tutorials/creating-retina-display-graphics/">www.photoshopquicktips.com/tutorials/creating-retina-display-graphics/</a></p>
</section>
	
	<section id="Index_Pages">
	<div class="page-header"><h3>Index Pages</h3></div>
	
	<p><b>index.html & index4.html<br>Slider Revolution:</b>
	Slider Revolution is a fully developed slide displaying system offering the capability to show images, videos and captions paired with simple, modern and fancy 
	3D transitions. On top of that, Slider Revolution is fully responsive and mobile optimized and can take on any dimensions.
	<br>
	Demo: <a href="http://themes.themepunch.com/?theme=revolution_jq">www.themes.themepunch.com/?theme=revolution_jq</a><br>
	Documentation: Folder > documentation > slider_revolution<br>
	Settings can be altered at the foot of the page, commented "slider settings"  </p>
<pre class="pre-show prettyprint linenums">
   delay:9000,
   startwidth:1170,
   startheight:600,
   fullWidth:"on",
   onHoverStop:"on",
   touchenabled:"on"
</pre>
	<p><b>index2.html & alt_footer.html - Nerve Slider -</b> Add your images in the commented section.<br> 
	Add your image height and width at the foot of the page, commented, "nerve slider". You can adjust the height to your requirements, there's also further settings for the slider which you can read on - <a href="http://www.ryanbruzan.net/work/plugins/nerve-slider">www.ryanbruzan.net/work/projects/nerve-slider</a><br> 
	
<pre class="pre-show prettyprint linenums">$(document).ready(function() {
$(".myslider").show().nerveSlider({
   sliderResizable: true,
   sliderWidth: "1920px",
   sliderHeight: "920px",
   });
});	
</pre>

Please add a height and width to every instance where Nerve Slider is used thoughout the template.<br>
	Nerver Slider is hidden before load in theme.css > general > .myslider, .myslider1, .myslider2, .projects  { display: none; }
</p>
	
	<p><b>index3.html - Nivo Slider</b> - Add your images in the commented section. - <a href="dev7studios.com/nivo-slider/">dev7studios.com/nivo-slider/</a></p>
	
	<p><b>index5.html - Html5 Video</b><br>
	This section has been created using Slider Revolution.
	You will need to add your mp4 and ogv videos and poster image into the folder > video and to the commented code.<br>
	I have included the poster image in your download for a guide, if you would like to use the video shown in the demo, I have included a link in <a href="#video">Sources & Credits</a>
where you can download it.
	<br>
	Please Note: Mobile browsers only display the supplied video poster, this is an intentional decision and avoids forcing users to download large video files.</p>
	
	
	
</section>
	
<section id="pages">
	<div class="page-header"><h3>Pages</h3></div>
		
		<b>Team:</b> CSS: css > theme.css > 04. PAGES > 0I:TEAM<br>
		<b>About:</b> CSS: css > theme.css > 04. PAGES > II: ABOUT PAGE<br>
		Skill Bars : Add your percentage into the code 
<pre class="pre-show prettyprint linenums">
&lt;div class="progress"&gt;
  &lt;div class="bar" data-percentage="85"&gt;
&lt;/div&gt;</pre>
		<b>Services:</b><br>
Mulit-Item Slider:
<br>Read More:
<a href="http://tympanus.net/codrops/2012/12/31/how-to-create-a-simple-multi-item-slider/">www.tympanus.net/codrops/2012/12/31/how-to-create-a-simple-multi-item-slider</a><br>
CSS: css > slider.css<br>
<b>Testimonials:</b><br>
CSS: css > theme.css > IV: TESTIMONIALS<br>

<b>Timeline:</b><br>
CSS: css > timeline.cs<br>

Read More: <a href="http://tympanus.net/codrops/2013/05/02/vertical-timeline/">www.tympanus.net/codrops/2013/05/02/vertical-timeline</a><br>
<b>Dribbble Stream:</b><br>
Add your username commented at the foot of the page.
<br>
<b>Alt Footer</b><br>
	CSS: css > alt_footer.cs<br>
	<b>Pricing Tables</b><br>
	CSS: css > theme.css > 06: 404 PAGE, PRICING TABLE, ACCORDIAN, TABS, TOOLTIPS >PRICING TABLE<br>
</section>

<section id="work"><div class="page-header"><h3>Portfolio & Carousels</h3></div>
	
	<b>Portfolio</b><br>
<p>The portfolio pages use sorting so that you can organize your images into categories.   
Add your categories in place of - Category 01, Category 02.... etc.
Do this for both the pictures and the options menu. Just follow the code!
</p><p>
The images enlarge using PrettyPhoto, the top image is the large picture, the 
bottom is the small image.<br>
	<a href="http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/">
	www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/</a><br>
<pre class="pre-show prettyprint linenums">
&lt;div class="hover_img"&gt;
  &lt;a href="img/portfolio/1.jpg" data-rel="prettyPhoto[portfolio1]"&gt;
   &lt;img src="img/portfolio/1.jpg" alt="" /&gt; &lt;/a&gt;
&lt;/div&gt;</pre>
   
You can change the hover colour in colour.css and also the zoom.png.
<br><br>

<p>
<b>Paginated Gallery</b><br>
The paginated gallery uses jPages, you can set the numbers of images per page at the bottom of each gallery page.
<pre class="pre-show prettyprint linenums">
/* SET NUMBER OF IMAGES PER PAGE */
&lt;script type="text/javascript"&gt;
  $(function(){
   $("div.holder").jpages({
     containerid  : "itemcontainer",
     perpage      : 12,
     keybrowse    : true
   });</pre>
<br>

<p><b>Masonry Gallery</b><br>
This gallery uses masonry for the grid and 3D transforms for item navigation. For smaller screens media queries adjust the grid layout and also the gallery view.<br>
In the gallery view, the arrow keys can be used to navigate and the view can be closed using the "Esc" key.<br>
Please note that we are using CSS 3D Transforms which are only supported in modern browsers.</p>
<p>
1: Add your thumbnails to img > small.<br>
2: Add your large slideshow images to img >large.<br>
3: Add your thumbnail images following the code  'Add Your Thumbs Here' and then add your slideshow images into the commented section 'Slideshow' along with your image descriptions.
</p>
<br/>                                             

<p><b>Index & Related Projects Carousel</b><br>
	The carousel uses CarouFredsel you can read more about its settings here: <br>
	<a href="http://docs.dev7studios.com/jquery-plugins/caroufredsel">www.docs.dev7studios.com/jquery-plugins/caroufredsel</a></p>
	
	<p>CSS: css > theme.css > 05: PORTFOLIO, GALLERY, MASONRY, CAROUSEL & THUMB CAROUSELS >  THUMBNAIL CAROUSELS<br>
	
	You can find the settings for your carousel at the foot of the page.<br>
	
	<pre class="pre-show prettyprint linenums">
jQuery(document).ready(function($) {
$("#slider_home").carouFredSel({ width : "100%", height : "auto",
  responsive : true, auto : false,
  items : { width : 231, visible: { min: 1, max: 3 }...</pre>

You can change the arrow positions and slider heights in css > theme.css > thumbnail carousels<br>
	The images open using PrettyPhoto which is explained in the 'portfolio' section.
<br><br>
<p><b>Blog Carousel</b><br>
I have also included Bootstap's default carousel, an example can be seen on blog.html<br>
CSS: theme.css >  05: PORTFOLIO, GALLERY, MASONRY, CAROUSEL & THUMB CAROUSELS >  CAROUSEL
	
	
	</section>
	
	<section id="contact"><div class="page-header"><h3>Contact & Map</h3></div>
	<p><b>Google Map:</b><br>
	Add your address at the foot of the html page where commented. &lt;!--//GOOGLE MAP - ADD YOUR ADDRESS HERE --&gt;</p>
<p><b>Contact Form:</b><br>
	Add your email address into > mail.php.<br>
	Replace, 'yourname@yourdomain.com' with your own.<br>
	If you would like to change the notification message you can do so at the foot of the html page.<br>
	// Message Sent - Show the 'Thank You' message and hide the form</p>
<p>Contact Form Tip:<br>
When you are testing / checking your contact form, enter a false email into the contact form, not your actual one.</p>
	</section>


<section id="css3"><div class="page-header"><h3>CSS3 Animations</h3></div>
	<p><b>CSS3 Animations:</b><br>
	<p>
		CSS3 animations are used throughout this theme e.g logo bounce on index pages, they are controlled using animate.css. <br>
		You will find the settings for them at the bottom of the theme.css file.<br>I have also set some to activate on page 
		load, this can be changed or removed in js > scripts.js > animations. <br>
		<a href="http://daneden.me/animate/">http://daneden.me/animate/</a>
	</p>
	<p>
		I have selected, fade in down and fade in up for the transistions. So, if you would like to make a div fade in on page load simply add either fadeindown or 
		fadeinup to the div class.
	</p>
<pre class="pre-show prettyprint linenums">
   &lt;div class="team_sections fadeindown"&gt;
</pre>
</section>
	
	<section id="credit"><div class="page-header"><h3>Sources & Credits</h3></div>
	<p><b>Sources</b><br>
	

	<ul>
		<li>Twitter Bootstrap - <a href="http://getbootstrap.com/">www.getbootstrap.com/</a></li>
		<li>Font Awesome - <a href="http://fortawesome.github.io/Font-Awesome/">www.fortawesome.github.io/Font-Awesome/</a></li>
		<li>Slider Revolution - <a href="http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848">www.codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848</a></li>
		<li>NivoSlider - <a href="http://dev7studios.com/nivo-slider/">www.dev7studios.com/nivo-slider/</a></li>
		<li>NerveSlider - <a href="http://www.ryanbruzan.net/work/plugins/nerve-slider">www.ryanbruzan.net/work/projects/nerve-slider</a></li>
		<li>PrettyPhoto - <a href="http://no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/">www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/</a></li>
		<li>Carousel - <a href="http://caroufredsel.dev7studios.com/">www.caroufredsel.dev7studios.com/</a></li>
		<li>jPages  - <a href="http://luis-almeida.github.com/jPages">www.luis-almeida.github.com/jPages</a></li>
		<li>Social Icons - <a href="https://github.com/samcollins/css-social-buttons">www.github.com/samcollins/css-social-buttons</a></li>
		<li>gMap - <a href="http://gmap3.net">http://gmap3.net</a></li>
		<li>Animate Css - <a href="http://daneden.me/animate/">www.daneden.me/animate/</a></li>
		<li>Retina - <a href="http://retinajs.com/">www.retinajs.com/</a></li>
		<li>TouchSwipe - <a href="https://github.com/mattbryson/TouchSwipe-Jquery-Plugin">www.github.com/mattbryson/TouchSwipe-Jquery-Plugin</a></li>
		<li>Services Slider - <a href="http://tympanus.net/codrops/2012/12/31/how-to-create-a-
simple-multi-item-slider/">www.tympanus.net/codrops/2012/12/31/how-to-create-a-
simple-multi-item-slider/</a></li>
		<li>Timeline - <a href="http://tympanus.net/codrops/2013/05/02/vertical-timeline/">www.tympanus.net/codrops/2013/05/02/vertical-timeline/</a></li>
		
	<li>Grid Gallery - <a href="http://tympanus.net/codrops/2014/03/21/google-grid-gallery/">www.tympanus.net/codrops/2014/03/21/google-grid-gallery/</a></li>	
		
	</ul>

	<br>
	<p><b>Images Used In Demo</b><br>
	<ul>
		<li>Justin Mezzell - <a href="http://justinmezzell.com/">www.justinmezzell.com/</a></li>
		<li>Illustrations - <a href="http://designmodo.github.io/Flat-UI/">www.designmodo.github.io/Flat-UI/</a></li>
		<li>Slider Revolution Images - robot 2 & rocket - <a href="http://unrestrictedstock.com/">www.unrestrictedstock.com/</a></li>
		<li>Robot 1 - <a href="http://www.opengraphicdesign.com/">www.opengraphicdesign.com/</a></li>
		<li>Neil Webb - <a href="http://neilwebb.net/">www.neilwebb.net/</a></li>
		<li>Split Shire - <a href="http://splitshire.com/">www.splitshire.com/</a></li>
		<li>IM Creator - <a href="http://www.imcreator.com/free">www.imcreator.com/free</a></li>
		<li>Html5 Video - <a href="http://www.beachfrontbroll.com/">www.beachfrontbroll.com/</a></li>
		<li>Unsplash - <a href="http://www.unsplash.com">www.unsplash.com</a></li>
		<li>Pixden - <a href="http://www.pixeden.com/">www.pixeden.com/</a></li>
	</ul>
		<br>
	<p id="video"><b>Download Link for Html5 Video:</b><br></p>
	<p><a href="https://app.box.com/s/opxqdwfc9fxc1zkpafeg">https://app.box.com/s/opxqdwfc9fxc1zkpafeg</a> </p>
	
		<br>
		<p><b>Psd's</b><br></p>
	<ul>
		<li>Psds's of elements - rocket, flames, iMac mockup, logo, map marker, ribbon and zoom can be found in extras > psd.</li>
		
	</ul>
			<br>
		<p>
		Once again, thank you so much for purchasing this template. As I said at the beginning, I'll be glad to help you if you have any questions relating to this template. 
		No guarantees, but will do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and 
		asking your question in the &quot;Item Discussion&quot; section.
		</p>
		
		<p>Jo</p>
		</section>

	</div>
</body>
</html>